<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/0.png" alt="" id="imgarr">
		<br><br>
		<button type="button">开始</button>
		<button type="button">结束</button>
		<script type="text/javascript">
			//获取imgu
			var imgarr = document.getElementById("imgarr");
			var bot = document.getElementsByTagName("button");
			//定义一个数组来储存图片
			var arrimg = ["img/0.png","img/1.png","img/2.png","img/3.png","img/4.png","img/5.png","img/6.png","img/7.png","img/8.png"]
			//定义一个索引
			var index = 0 ;
			//在全局中定义一个变量
			var timer;
			bot[0].onclick = function(){
				//关闭上一次定时器,在开启定时器之前需要关闭当前元素上的定时器
				clearInterval(timer);
				//定义一个定时器
				timer = setInterval(function(){
					//使索引自增
					index++;
					//判断索引是否达到最大值
					index %= arrimg.length;
					//修改img的src值
					imgarr.src = arrimg[index];
					// console.log(index);
				},1000)
			}
			bot[1].onclick = function(){
				clearInterval(timer);
				// clearInterval可以接受任何参数
				// 如果参数是一个有效的定时器标识,则会停止
			}
		</script>
	</body>
</html>
